﻿<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<App.Views.ViewModels.UCServicesItemListViewModel>>" %>
<style type="text/css">
    /* 费用列表控件样式*/
#uc_service_item_list{
    width:100%;
    margin:0 px;
    min-height: 168px;
    overflow:auto; 
    font:10px
}
#uc_service_item_list div.title{
    font-size:16px;
    font-weight:bold;
    border-bottom:solid 2px #a8c7ce;
    text-align:center;
}
#uc_service_item_list table
{
    font-size:11px;
    color:#000000;
    width:95%;
    margin:5px auto 5px ;
    background-color:#a8c7ce;
}
#uc_service_item_list table tr th{
    height:30px;
    background-color:#d3eaef;
    text-align:center;
}
#uc_service_item_list table tr td{
    height:25px;
    text-align:center;
    background-color:#FFFFFF;
}
#uc_service_item_list table{
    color:#000000;
    width:95%;
    margin:5px auto 5px ;
}
</style>
<script type="text/javascript">
    /*
    使用此控件时，可以添加一个隐藏域
    在提交表单前调用下面的函数，将费用列表中的数据保存在此隐藏域中
    在后台获得此控件中选择的全部信息，简单处理
    格式为：id,qty,lineTotal | id,qty,lineTotal | ...
    */
    function GetSubmitString(id) {
        var str = "";
        $("[name='chkSelect']").each(function () {
            if ($(this).is(':checked')) {
                var id = $(this).attr("value");
                str = str + id + "," + $("#Qty" + id).attr("value") + "," + $("#M" + id).attr("value") + "|"
            }
        });
        if (str.length > 0) str = str.substring(0, str.length - 2);
        $("#" + id).val(str);
    }
    //取消或全选
    var DoSelect = function () {
        var v = $("#chkSelectAll").is(':checked');
        $("[name='chkSelect']").each(function () {
            if (!v && !$(this).attr("disabled")) {
                $(this).removeAttr("checked");
            }
            else {
                $(this).attr("checked", 'true');
            }
        });
        CalcTotals();
    };
    //数量更改时，重新计算单行费用（金额=单价*数量）及总费用
    function CalcSubTotals(id) {
        var obj = $("#Qty" + id)[0];
        var m = obj.value * obj.unitprice;
        var id = "M" + id;          
        $("#" + id).val(m.toFixed(2));       //IE支持
        CalcTotals();
    }
    //计算选择的所有费用
    function CalcTotals() {
        var totals = 0.0;
        $("[name='chkSelect']").each(function () {            
            if ($(this).is(':checked')) {
                var id = $(this).attr("value");
                totals = totals + parseFloat($("#M" + id).attr("value"));
            }
        });        
        $("#totals").val(totals.toFixed(2));            //IE支持
        GetSubmitString("SelectedItemList");
    }
    //加载时计算已选费用
    $(function () {
        CalcTotals();
    });
    </script>   
<div id="uc_service_item_list">   
    <div class="title">费用明细</div>
    <table width="100%" cellpadding="0"cellspacing="1" border="0" >
    <tr>
        <th width="4%" >
            <div align="center"><input type="checkbox" name="chkSelectAll" id="chkSelectAll" onclick="DoSelect()" /> </div>
        </th>            
        <th width="16%">编号</th>
        <th width="30%">项目名称</th>  
        <th width="10%">计量单位</th>      
        <th width="15%">单价</th>          
        <th width="10%">数量</th>
        <th width="15%">金额</th>            
    </tr>
    <% if(Model!=null && Model.Count()>0) foreach (var item in Model){ %>    
    <tr>            
        <td><input type="checkbox" name="chkSelect" id="chk<%=item.ItemNO %>" onclick ="CalcSubTotals('<%=item.ItemNO %>')"
            <% if(item.Required == true || item.IsSelected){ %> checked="checked" <%} %>
            <% if(item.Required == true || item.IsPay ){ %>  disabled="disabled"  <%} %>            
                value="<%=item.ItemNO %>" /></td>    
        <td><%: item.ItemNO %></td>            
        <td><%: item.ItemName %></td>
        <td><%: item.Unit %></td>
        <td><%: item.Price %></td>
        <td>
            <input type="text" value="<%: item.Qty %>"  unitprice="<%: item.Price %>" name="Qty" 
                <% if(item.IsPay ){ %>  disabled="disabled"  <%} %> 
                onchange="CalcSubTotals('<%=item.ItemNO %>')" style="width:90%" id="Qty<%: item.ItemNO %>" />
        </td>
        <td>
            &nbsp;&nbsp; <input id="M<%: item.ItemNO %>" style="width:80%;color:blue; border:0" value="<%: string.Format("{0:f}",item.Price*item.Qty) %>" />
        </td>            
    </tr>
<% }else{ %>
    <tr><td colspan="7">没有费用明细</td></tr>
<% }%>
    <tr>
        <td colspan="6">费用合计：</td>
        <td>&nbsp;&nbsp;<input type="text" value="0.00" name="totals" style="width:80%; font-weight:bold;color:blue; border:0;" id="totals" />        
        <!-- 选择费用列表后，生成数据，隐藏在此，以便提交 -->
        <input type="hidden" value="" name="SelectedItemList" id="SelectedItemList" />
        </td>        
    </tr>
    </table>    
</div>
